<template>
  <div class="main">
    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
    <h2>武平{{route.params.line}}路车</h2>
    <p v-if="lineDetail != undefined" class="line-description">{{lineDetail.data.stationFirst}}—{{lineDetail.data.stationLast}}</p>
    <p v-if="busInfo != undefined && !hasBusOnLoad" class="warn-info">该条线路上未找到在运行公交车。</p>
    <bus-info :stationList="busInLine"></bus-info>
    
    <span class="warn-info">获取了{{count}}次车辆数据</span>
  </div>
</template>

<script lang="ts">
import { defineComponent, watch, ref, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import IbusInfo from '../type/busFlow'
import { IlineDetail } from '../type/lineDetail'
import BusInfo, { IbusStation } from '../components/BusInfo.vue'
import useLineStation from '../hooks/useLineStation'
import useBusInfo from '../hooks/useBusInfo'
import { distanceCalculate } from '../hooks/distanceCalculate'

export default defineComponent({
  name: 'PublicBus',
  components: { BusInfo },
  async setup () {
    const intervalTimer = ref(0)
    const count = ref(0)
    const busInfo = ref<IbusInfo>()
    const lineDetail = ref<IlineDetail>()
    const busInLine = ref<IbusStation[]>([])
    const line = ref(0)
    const hasBusOnLoad = ref(false)
    const route = useRoute()
    line.value = parseInt(route.params.line as string)
    document.title = '武平公交线路(非官方)-武平' + line.value + '路车'

    // 载入公交线路
    useLineStation<IlineDetail>(line.value).then(res => {
      lineDetail.value = res
      if (lineDetail.value?.data != undefined) {
        lineDetail.value.data.stationDetails.forEach((station, i) => {
          const stationId = station.stationId
          const lng = station.lng
          const lat = station.lat
          const stationName = station.stationName
          const stationNo = station.labelNo
          if (lineDetail.value != undefined) {
            const nextStation = lineDetail.value.data.stationDetails[i + 1]
            const isLast = lineDetail.value.data.stationDetails.length - 1 === i
            const stationDistance = isLast ? 0 : distanceCalculate(lat, lng, nextStation.lat, nextStation.lng)
            busInLine.value.push({
              stationId,
              stationName,
              stationNo,
              lng,
              lat,
              lineNo: 2,
              stationDistance,
              busInfo: [],
            })
          }

        })
      }
    })
    // 载入公交车运行信息
    useBusInfo<IbusInfo>(line.value).then(res => {
      busInfo.value = res
    })
    onMounted(() => {
      // 刷新公交车运行信息
      intervalTimer.value = window.setInterval(() => {
        useBusInfo<IbusInfo>(line.value).then(res => {
          busInfo.value = res
        })
          .catch(err => console.log(err))
        count.value++
      }, 3000)
    })
    onUnmounted(() => {
      clearInterval(intervalTimer.value)
    })
    // 监听公交车运行信息变化情况
    watch(busInfo, () => {
      if (busInfo.value?.data != undefined && busInLine.value.length != 0) {
        busInLine.value.forEach(station => station.busInfo.length = 0)
        busInfo.value.data.forEach(bus => {
          if (lineDetail.value != undefined) {
            const busName = bus.carNo;
            const busLng = bus.lng;
            const busLat = bus.lat;

            const stationNo = (bus.isUpDown === 0) ? Math.abs(bus.isStation) : -Math.abs(bus.isStation)
            const arrived = bus.isStation > 0
            let stationPosition = lineDetail.value.data.stationDetails.findIndex(station => station.labelNo === stationNo)
            if (!arrived) {
              stationPosition++
            }
            if (stationPosition != undefined) {
              const distance = distanceCalculate(busLat, busLng, busInLine.value[stationPosition].lat, busInLine.value[stationPosition].lng)
              // if (distance < busInLine.value[stationPosition].stationDistance) {
              if (!hasBusOnLoad.value) hasBusOnLoad.value = true
              busInLine.value[stationPosition].busInfo.push({ busName, busLng, busLat, distance, arrived })

              // }
            }
          }
        })
      }
    })

    return { busInfo, lineDetail, count, intervalTimer, busInLine, hasBusOnLoad, route }
  }
})
</script>
<style scoped>
h2,
.line-description,
.warn-info {
  display: block;
  padding: 0.2rem;
  margin: 10px 0 0;
}
.warn-info {
  color: #e83015;
  display: inline-block;
  border-top: 1px solid #e83015;
  border-bottom: 2px solid #e83015;
}
</style>